<template>
    <div class="fillContain">
        <head-top></head-top>

        <el-form :inline="true" ref="form" :model="form" size="mini" label-width="">
            <el-form-item label="名称" prop="reportName">
                <el-input v-model="form.reportName"  placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="账期" prop="cycle">
                <el-date-picker
                        v-model="form.cycle"
                        type="month"
                        value-format ="yyyyMM"
                        placeholder="选择月">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="分类ID">
                <el-select v-model="form.reportCategoryId" filterable clearable placeholder="请选择分类" >
                    <el-option v-for="item in reportCategoryIds" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务器">
                <el-select v-model="form.reportUploadId" filterable clearable placeholder="请选择服务器" >
                    <el-option v-for="item in servers" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" filterable clearable placeholder="请选择状态" >
                    <el-option v-for="item in statuses" :key="item.VALUE" :label="item.NAME" :value="item.VALUE"></el-option>
                </el-select>
            </el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        </el-form>

        <el-table
                ref="singleTable"
                :data="tableData"
                border
                style="width: 100%"
                height="600px"
                max-height="100%"
                @current-change="handleCurrentRowChange">
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="id"
                    width="50px"
                    label="ID">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="reportName"
                    label="报表名称">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="reportCategoryName"
                    width="100px"
                    label="分类">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="reportCategoryId"
                    width="100px"
                    label="分类ID"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="reportUploadId"
                    width="80px"
                    label="数据源ID"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="reportUploadName"
                    width="80px"
                    label="数据源">
            </el-table-column>
            <el-table-column
                    prop="cycle"
                    width="80px"
                    label="账期">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="uploadPath"
                    label="上传路径">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="status"
                    width="50px"
                    label="状态"
                    :formatter="statusFormatter">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="createTime"
                    width="160px"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="updateTime"
                    width="160px"
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="downloadCount"
                    width="50px"
                    label="下载次数">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    fixed="right"
                    width="90px"
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-download" @click="downLoadRow(scope.row)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts">
        </el-pagination>
    </div>
</template>

<script>

    import {getTableData, getServers,downLoadFile,getCategory} from '@/api/reportDownload'
    import HeadTop from '@/views/main-components/HeadTop.vue'
    import {ListSysDict} from '@/api/reportData'
    export default {
        created: function () {
            this.getUserInfo();
        },
        data() {
            return {
                tableData: [],
                currentRow: null,
                name: '',
                form: {
                    reportName : '',
                    cycle : '',
                    status : ''
                },
                servers: [],
                reportCategoryIds: [],
                statuses: [],
                counts: 0,
                currentPage: 1,
                pageSize: 10,
                statusMap :new Map(),
            }
        },
        components: {
            HeadTop,
        },
        methods: {
            /**
             *测试用户权限
             */
            async getUserInfo(){
                let STAFF_ID=this.$utils.getUrlKey("STAFF_ID");
                let OPERATE_TIME=this.$utils.getUrlKey("OPERATE_TIME");
                let TRADE_ID=this.$utils.getUrlKey("TRADE_ID");
                let SIGNMSG=this.$utils.getUrlKey("SIGNMSG");
                let channel='reportDownload';

                if (STAFF_ID=="1"||this.pression==false){
                    this.getServers();
                    this.getCategory();
                    this.getDictByCodeAndVal();
                    this.getStates();
                    this.search();
                }else {
                    let userinfo= await this.getUser(STAFF_ID,OPERATE_TIME,TRADE_ID,SIGNMSG,channel);
                    if (userinfo.isPression){
                        this.getServers();
                        this.getCategory();
                        this.getDictByCodeAndVal();
                        this.getStates();
                        this.search();
                    }else{
                        this.$router.push({path: '/404',query:{ msg:userinfo.msg}});
                    }
                }


            },
            //监听页面变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.search();
            },
            //监听选中行数
            handleCurrentRowChange(val) {
                this.currentRow = val;
                //alert(this.currentRow.address);
            },
            //监听页面选择变化
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },
            /**
             * 获取字典信息
             */
            async getDictByCodeAndVal(){
                let params = {
                    type:'dict',
                    dictCode: "REPORT_STATUS"
                };
                let dictSQL =await ListSysDict(params);
                dictSQL.forEach(dict=>{
                    this.statusMap.set(dict.VALUE,dict.NAME);
                })
            },
            //table字段转换
            statusFormatter: function(row) {
                return this.statusMap.get(row.status)
            },
            async downLoadRow(row) {
                if (row.status == '00X'){
                    this.$message({
                        message: '此报表不提供下载！请检查状态！',
                        type: 'warning'
                    });
                    return;
                }
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if (row) {
                    let reply = await downLoadFile(row);
                    if (reply.code == 200) {
                        window.location.href = "zte-report/reportDownload/downLoadLocal?uuid=" +reply.data.uuid +"&filename="+reply.data.filename+"&id="+row.id+"&page=1";
                        //由于打包是要删掉统一请求路径前缀zte-report，所以这里打包时要删除掉zte-report
                        //window.location.href = "reportDownload/downLoadLocal?uuid=" +reply.data.uuid +"&filename="+reply.data.filename+"&id="+row.id;
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: reply.msg
                        });
                    }
                }
                loading.close();

            },
            async getServers() {
                let reply = await getServers();
                let all = {
                    name : "全部",
                    value : ''
                }
                reply.unshift(all);
                this.servers = reply;
            },
            async getCategory() {
                let reply = await getCategory();
                let all = {
                    name : "全部",
                    value : ''
                }
                reply.unshift(all);
                this.reportCategoryIds = reply;
            },
            async getStates() {
                let params = {
                    type:'dict',
                    dictCode: "REPORT_STATUS"
                };
                let reply =await ListSysDict(params);
                let all = {
                    NAME : "全部",
                    VALUE : ''
                }
                reply.unshift(all);
                this.statuses = reply;
            },
            //查询
            async search() {
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let params = {
                            size : this.pageSize,
                            current : this.currentPage,
                            reportUploadId : this.form.reportUploadId,
                            reportName : this.form.reportName,
                            cycle : this.form.cycle,
                            reportCategoryId : this.form.reportCategoryId,
                            status : this.form.status
                        };
                        let reply = await getTableData(params);
                        if (reply.code == 200) {
                            this.counts = reply.data.total;
                            this.currentPage = reply.data.pageNum;
                            this.tableData = reply.data.list;
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: reply.msg
                            });
                        }
                        loading.close();
                    }
                });
            },
        }
    }
</script>

<style scoped>

</style>